<template>
    <div class="log-item">
        <p class="order_no">订单号：{{item.order_no}}</p>
        <div class="log-content">
            <img src="../assets/images/buy_gq.jpg" class="avatar"/>
            <div class="message">
                <p class="name">{{item.name}}</p>
                <p class="time">购买时间：{{item.created_at}}</p>
                <p class="time">购买单位：{{item.num}} 单位</p>
                <p class="time">购买数量：{{item.stock_num}} 股</p>
                <p class="time">支付状态：<span>{{item.status == 0 ? '未支付':'已支付'}}</span></p>
                <p class="sell-price">卖出价格：<span>{{item.sell_price}}元/股</span></p>

            </div>
            <div class="money">
                <cube-button v-show="item.status == 1 && item.can_sell == 1" @click.stop="sell(item)"
                             :inline="true">
                    申请卖出
                </cube-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {Url} from "../utils/config";

    export default {
        name: "good-item",
        props: {
            item: {
                type: Object
            }
        },
        methods: {
            sell(item) {
                const toast = this.$createToast({
                    time: 0,
                    txt: '正在登录'
                })
                toast.show();
                this.$get(Url.sellStock, {id: item.id}).then((res) => {
                    toast.hide()
                    this.$createToast({
                        txt: res.msg,
                        type: 'correct'
                    }).show();
                }).catch((error) => {
                    toast.hide()
                    this.$createToast({
                        txt: error,
                        type: 'error'
                    }).show();
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .log-item {
        background: #fff;
        padding: 0 32px;
        margin-bottom: 20px;
        .order_no {
            font-size: 12PX;
            color: #888888;
            padding: 24px 10px;
            border-bottom: solid 1PX #e0e0e0;
        }
        .log-content {
            display: flex;
            flex-direction: row;

            align-items: center;
            .avatar {
                width: 120px;
                height: 120px;
            }
            .message {
                font-size: 12PX;
                color: #888888;
                margin-left: 32px;
                .time {
                    font-size: 14PX;
                    margin-bottom: 12px;
                    span {
                        color: #e6741d;
                    }
                }
                .name {
                    font-size: 14PX;
                    margin-bottom: 12px;
                }
                .sell-price {
                    font-size: 14PX;
                    margin-bottom: 12px;
                    span {
                        color: #4b8d00;
                    }
                }
            }
            .money {
                margin-left: auto;
                color: #e64e4d;
                font-size: 14PX;
            }
        }

    }
</style>